<template>
  <!-- 搜索栏 -->
  <div class="search-bar">
    <img src="../assets/images/search.png" alt="">
    <input type="text" placeholder="快速搜索您需要的服务或服务提供者">
    <button>搜索</button>
  </div>
  <!-- 公众号 -->
  <img class="official-account" src="../assets/images/officialAccount.png" alt="">
  <div class="official-account-text1">关注智务网公众号</div>
  <div class="official-account-text2">智选服务 务实生活</div>
</template>

<script>

export default {
  name: 'SearchBar',
  setup() {



  }
}
</script>

<style scoped>
.search-bar {
  position: absolute;
  left: 10.9375vw;
  top: 12.037vh;
  width: 62.29vw;
  height: 6.02vh;
  border-radius: 5.16vw;
  background: rgba(255, 255, 255, 1);
  border: 2px solid rgba(13, 127, 233, 1);
}

.search-bar img {
  position: absolute;
  left: 0.9vw;
  top: 1.45vh;
  width: 1.2vw;
  height: 2.8vh;
}

.search-bar input {
  position: absolute;
  left: 3.125vw;
  top: 0;
  width: 52vw;
  height: 5.55vh;
  font-size: 1.042vw;
  font-weight: 400;
  line-height: 3.7vh;
  color: rgba(153, 153, 153, 1);
  text-align: left;
  vertical-align: middle;
  border: none;
}

.search-bar input::placeholder {
  font-size: 1.042vw;
  color: rgba(153, 153, 153, 1);
}

.search-bar button {
  position: absolute;
  right: 0;
  top: 0;
  width: 6.2vw;
  height: 6.02vh;
  border-radius: 5.16vw;
  background: rgba(13, 127, 233, 1);
  border: none;
  font-size: 1.146vw;
  font-weight: 500;
  color: rgba(255, 255, 255, 1);
}

.official-account {
  position: absolute;
  right: 20.9375vw;
  top: 12.863vh;
  width: 2.5vw;
}

.official-account-text1 {
  position: absolute;
  right: 10.9375vw;
  top: 12.32vh;
  font-size: 1.0417vw;
  letter-spacing: 0.104vw;
  color: #202020;
  text-align: left;
  vertical-align: top;
}

.official-account-text2 {
  position: absolute;
  right: 11.51vw;
  top: 15.65vh;
  font-size: 1.0417vw;
  color: rgba(153, 153, 153, 1);
  text-align: left;
  vertical-align: top;
}


input:focus {
  outline: none;
}
</style>
